<template>
	<view class="doctor-container">
		<view class="header">
			<text class="title">医生工作站</text>
			<view class="status-badge" :class="{'status-online': isOnDuty}">
				{{ isOnDuty ? '值班中' : '休息中' }}
			</view>
		</view>
		
		<view class="content">
			<view class="doctor-info-card">
				<view class="doctor-avatar">
					<text class="avatar-text">{{doctorName.substr(0, 1)}}</text>
				</view>
				<view class="doctor-info">
					<text class="doctor-name">{{doctorName}}</text>
					<text class="doctor-title">{{doctorTitle}}</text>
					<text class="doctor-department">{{doctorDepartment}}</text>
				</view>
			</view>
			
			<view class="work-panel">
				<view class="panel-title">工作面板</view>
				
				<view class="function-list">
					<view class="function-item" @tap="navigateTo('/pages/patient-list/index')">
						<view class="function-icon">
							<text class="iconfont">👥</text>
						</view>
						<text class="function-name">患者列表</text>
					</view>
					
					<view class="function-item" @tap="navigateTo('/pages/schedule/index')">
						<view class="function-icon">
							<text class="iconfont">📅</text>
						</view>
						<text class="function-name">排班管理</text>
					</view>
					
					<view class="function-item" @tap="navigateTo('/pages/consultation/doctor-index')">
						<view class="function-icon">
							<text class="iconfont">💬</text>
						</view>
						<text class="function-name">在线问诊</text>
					</view>
					
					<view class="function-item" @tap="toggleDutyStatus">
						<view class="function-icon">
							<text class="iconfont">🔄</text>
						</view>
						<text class="function-name">{{isOnDuty ? '下班' : '上班'}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { updateDoctor } from '@/js/doctor.js'
	
	export default {
		data() {
			return {
				doctorName: '医生',
				doctorTitle: '主治医师',
				doctorDepartment: '内科',
				isOnDuty: true,
				doctorInfo: null
			}
		},
		onLoad() {
			// 获取存储的医生信息
			try {
				const doctorInfoStr = uni.getStorageSync('doctorInfo');
				if (doctorInfoStr) {
					this.doctorInfo = JSON.parse(doctorInfoStr);
					this.doctorName = this.doctorInfo.name || '医生';
					this.doctorTitle = this.doctorInfo.title || '主治医师';
					this.doctorDepartment = this.doctorInfo.department || '内科';
					this.isOnDuty = this.doctorInfo.status === '值班';
				}
			} catch (e) {
				console.error('获取医生信息失败', e);
			}
		},
		methods: {
			// 页面导航
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			
			// 切换值班状态
			async toggleDutyStatus() {
				if (!this.doctorInfo) return;
				
				const newStatus = this.isOnDuty ? '休息' : '值班';
				
				try {
					await updateDoctor({
						...this.doctorInfo,
						status: newStatus
					});
					
					this.isOnDuty = !this.isOnDuty;
					this.doctorInfo.status = newStatus;
					
					// 更新存储的医生信息
					uni.setStorageSync('doctorInfo', JSON.stringify(this.doctorInfo));
					
					uni.showToast({
						title: `已切换为${newStatus}状态`,
						icon: 'none'
					});
				} catch (error) {
					console.error('更新状态失败', error);
					uni.showToast({
						title: '状态更新失败',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style>
	.doctor-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 40rpx;
	}
	
	.header {
		background-color: #8B4513;
		padding: 60rpx 40rpx 40rpx;
		color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.status-badge {
		background-color: #f0e6d2;
		color: #8B4513;
		padding: 6rpx 20rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
	}
	
	.status-online {
		background-color: #e6f7e6;
		color: #28a745;
	}
	
	.content {
		padding: 30rpx;
	}
	
	.doctor-info-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	.doctor-avatar {
		width: 120rpx;
		height: 120rpx;
		background-color: #f0e6d2;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;
	}
	
	.avatar-text {
		font-size: 60rpx;
		color: #8B4513;
		font-weight: bold;
	}
	
	.doctor-info {
		flex: 1;
	}
	
	.doctor-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10rpx;
	}
	
	.doctor-title {
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 6rpx;
	}
	
	.doctor-department {
		font-size: 28rpx;
		color: #8B4513;
	}
	
	.work-panel {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	.panel-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.function-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.function-item {
		width: 48%;
		background-color: #f9f9f9;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
	}
	
	.function-icon {
		width: 80rpx;
		height: 80rpx;
		background-color: #f0e6d2;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
	}
	
	.iconfont {
		font-size: 40rpx;
		color: #8B4513;
	}
	
	.function-name {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
	}
</style>